<template>
  <div class="app-container">
    <el-card class="box-card">
      <h3>企业基本信息</h3>
      <el-form ref="dataForm" :rules="rules" :model="formData" label-width="150px">
        <el-form-item label="企业名称" prop="name">
          <el-input v-model="formData.name" />
        </el-form-item>
        <el-form-item label="法人" prop="principal">
          <el-input v-model="formData.principal" />
        </el-form-item>

        <el-form-item label="成立时间" prop="date">
          <el-date-picker v-model="formData.date" type="date" placeholder="选择日期"/>
        </el-form-item>

        <el-form-item label="联系人" prop="contacts">
          <el-input v-model="formData.contacts" />
        </el-form-item>

        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="formData.phone" />
        </el-form-item>

        <el-form-item label="企业地址" prop="address">
          <el-input v-model="formData.address" />
        </el-form-item>
        <el-form-item label="协会简介" prop="detail">
          <editor :init="editorInit" v-model="formData.detail" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="formData.remark" />
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="box-card">
      <h3>企业成员</h3>
      <!--添加成员-->
      <el-button :plain="true" type="primary" @click="handleAttributeShow">添加</el-button>
      <el-dialog :visible.sync="detailDialogVisible" width="300px">
        <el-image :src="url"/>
      </el-dialog>
      <el-table :data="addList">
        <el-table-column property="member" label="成员姓名" />
        <el-table-column property="createTime" label="创建时间" />
        <el-table-column align="center" label="操作" width="100" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button type="danger" size="mini" @click="handleAttributeDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <div class="op-container">
      <el-button @click="handleCancel">取消</el-button>
      <el-button v-if="!product.id" type="primary" @click="handleUpsert('create')">保存</el-button>
      <el-button v-if="product.id" type="primary" @click="handleUpsert('edit')">更新</el-button>
    </div>
  </div>
</template>

<script>
import { createStorage } from '@/api/storage'
import Editor from '@tinymce/tinymce-vue'
import { getToken } from '@/utils/auth'

export default {
  name: 'ProductUpsert',
  components: { Editor },
  data() {
    return {
      detailDialogVisible: false,
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      product: {
        imgList: [],
        type: 0
      },
      formData: {
        date: '',
        name: '',
        remark: ''
      },
      addList: [
        {
          member: 'lcc',
          createTime: '2022-9-8'
        }
      ],
      skuBatchPriceVisiable: false,
      skuBatchPriceForm: {},
      rules: {
        categoryId: [
          { required: true, message: '请选择商品类目', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '请选择商品状态', trigger: 'blur' }
        ],
        title: [
          { required: true, message: '商品名称不能为空', trigger: 'blur' }
        ],
        unit: [
          { required: true, message: '物件单位不能为空', trigger: 'blur' }
        ],
        detail: [
          { required: true, message: '请填写商品详情', trigger: 'blur' }
        ],
        freightTemplateId: [
          { required: true, message: '请选择运费模板', trigger: 'blur' }
        ]
      },
      editorInit: {
        language: 'zh_CN',
        convert_urls: false,
        plugins: ['advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools importcss insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount'],
        toolbar: ['searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample', 'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen'],
        images_upload_handler: function(blobInfo, success, failure) {
          const formData = new FormData()
          formData.append('file', blobInfo.blob())
          createStorage(formData).then(res => {
            success(res.data.url)
          }).catch(() => {
            failure('上传失败，请重新上传')
          })
        }
      }

    }
  },
  computed: {
    headers() {
      return {
        ADMINTOKEN: getToken()
      }
    }
  },
  created() {

  },
  methods: {
    handleCancel() {
      this.$router.push({ path: '/user/enterprise' })
    },
    // 添加成员弹出框
    handleAttributeShow() {
      this.detailDialogVisible = !this.detailDialogVisible
    },
    /**
       * 执行更新添加操作，传入操作action字符串: 'create', 'edit'
       */
    handleUpsert() {
      this.$router.push({ path: '/user/enterprise' })
    },
    handleSpecDelete(row) {
      const index = this.specList.indexOf(row)
      this.specList.splice(index, 1)
    },
    randonBarcode(row) {
      row.barCode = new Date().getTime() + ''
      this.$forceUpdate()
    },
    handleBatchPrice() {
      for (let i = 0; i < this.skuTableData.length; i++) {
        if (this.skuBatchPriceForm.price) {
          this.skuTableData[i].priceRaw = this.skuBatchPriceForm.price
        }
        if (this.skuBatchPriceForm.vipPrice) {
          this.skuTableData[i].vipPriceRaw = this.skuBatchPriceForm.vipPrice
        }
        if (this.skuBatchPriceForm.originalPrice) {
          this.skuTableData[i].originalPriceRaw = this.skuBatchPriceForm.originalPrice
        }
      }
      this.skuBatchPriceVisiable = false
    },
    /** ******************* 图片上传相关 *********************/
    uploadOverrun: function() {
      this.$message({
        type: 'error',
        message: '上传文件个数超出限制!最多上传5张图片!'
      })
    },
    handleimgsUrl(response, file, fileList) {
      if (response.errno === 200) {
        this.product.imgList.push(response.url)
        this.product.img = this.product.imgList[0]
      }
    },
    handleRemove: function(file, fileList) {
      for (var i = 0; i < this.product.imgList.length; i++) {
        // 这里存在两种情况
        // 1. 如果所删除图片是刚刚上传的图片，那么图片地址是file.response.url
        //    此时的file.url虽然存在，但是是本机地址，而不是远程地址。
        // 2. 如果所删除图片是后台返回的已有图片，那么图片地址是file.url
        var url
        if (file.response === undefined) {
          url = file.url
        } else {
          url = file.response.url
        }

        if (this.product.imgList[i] === url) {
          this.product.imgList.splice(i, 1)
        }
      }
      if (this.product.imgList.length > 0) {
        this.product.img = this.product.imgList[0]
      }
    },
    beforSkuImgUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 1
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 1MB!')
      }
      return isLt2M
    },
    handleSkuImgSuccess(e, file, scope) {
      this.$set(this.skuTableData[scope.$index], 'img', e.url)
    }

  }
}
</script>

  <style>
  .el-card {
      margin-bottom: 10px;
  }

  .el-tag+.el-tag {
      margin-left: 10px;
  }

  .input-new-keyword {
      width: 90px;
      margin-left: 10px;
      vertical-align: bottom;
  }

  .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
      border-color: #20a0ff;
  }

  .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 120px;
      height: 120px;
      line-height: 120px;
      text-align: center;
  }

  .avatar {
      width: 145px;
      height: 145px;
      display: block;
  }

  .sku-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
  }

  .sku-uploader .el-upload:hover {
      border-color: #20a0ff;
  }

  .sku-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 60px;
      height: 60px;
      line-height: 60px;
      text-align: center;
  }

  .sku {
      width: 60px;
      height: 60px;
      display: block;
  }

  .input-new-tag {
      width: 90px;
      margin-left: 10px;
      vertical-align: bottom;
  }
  </style>
